<!--
 * @Author: decadent_zq 9867470+decadent-zq@user.noreply.gitee.com
 * @Date: 2023-04-03 14:07:54
 * @LastEditors: decadent_zq 9867470+decadent-zq@user.noreply.gitee.com
 * @LastEditTime: 2023-04-18 16:45:09
 * @FilePath: \absolutuniq_pc\src\components\bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <!-- 张权 2023年4月3日 14点08分 -->
  <!-- 底部 -->
  <div id="Bottom">
        <div id="div1">
            <div id="div2">
                <img :src="`${$imageUrl}?id=` + dynamicState.logoImg" id="img1">
                <p id="p1">北京市追云网络科技有限公司版权所有</p>
                <el-row>
                    <el-col :span="5">
                        <ul id="ul1">
                            <li>购物流程</li>
                            <li>常见问题</li>
                            <li>联系客服</li>
                            <li>生活旅行/团购</li>
                        </ul>
                    </el-col>
                    <el-col :span="5">
                        <ul id="ul1">
                            <li>售后政策</li>
                            <li>价格保护</li>
                            <li>退款说明</li>
                            <li>返修/退换货</li>
                            <li>取消订单</li>
                        </ul>
                    </el-col>
                    <el-col :span="5">
                        <ul id="ul1">
                            <li>OpenAPI</li>
                            <li>帮助文档</li>
                            <li>在线自助服务</li>
                            <li>更新日志</li>
                        </ul>
                    </el-col>
                    <el-col :span="5">
                        <ul id="ul1">
                            <li>关于我们</li>
                            <li>加入我们</li>
                            <li>使用条款</li>
                            <li>意见建议</li>
                            <li>合作伙伴</li>
                        </ul>
                    </el-col>
                    <el-col :span="2">
                        <div id="div3">
                            <img :src="`${$imageUrl}?id=` + dynamicState.weixinQrcode" id="img2">
                            <p id="p2">微信小程序</p>
                        </div>
                    </el-col>
                    <el-col :span="2">
                        <div id="div3">
                            <img :src="`${$imageUrl}?id=` + dynamicState.weixinServe" id="img2">
                            <p id="p2">微信服务号</p>
                        </div>
                    </el-col>
                </el-row>
            </div>
            <div id="div4"></div>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return{
            // 主题
            dynamicState: {}
        }
    },
    mounted() {
        this.dynamicStateByState()
    },
    methods: {
        // 获取主题信息
        dynamicStateByState () {
            this.$axios.get('/dynamicState/dynamicStateByState').then(res => {
                if (res.data.flag) {
                    this.dynamicState = res.data.data
                }else{
                    this.message('error', res.data.data)
                }
            }).catch(err => {
                console.log(err)
            })
        },
        // 封装弹窗
        message (type, message) {
            this.$message({
                message: message,
                type: type
            })
        }
    }
}
</script>

<style scoped>
    #div1{
        flex: 100%;
        height: 280px;
        background: #fbfbfb;
        border-top: 1px solid #dedede;
        color: #7a7a7a;
    }
    #div2{
        width: 1200px;
        height: 200px;
        margin: auto;
        padding: 20px;
    }
    #p1{
        font-size: 14px;
        font-weight: 400;
        margin: 8px 0 16px 0;
    }
    #img1{
        width: 80px;
        height: 40px;
    }
    #p2{
        font-size: 14px;
        font-weight: 400;
        margin: 8px 0 16px 5px;
        color: #9d9d9d;
    }
    #img2{
        width: 80px;
        height: 80px;
    }
    #ul1{
        list-style-type: none;
        margin: 0;
        padding: 0;
    }
    #ul1 li{
        font-size: 14px;
        color: #9d9d9d;
        margin: 5px 0;
        cursor:pointer;
    }
    #ul1 li:hover{
        color: #7a7a7a;
    }
    #div3{
        width: 80px;
        height: 120px;
        margin: auto;
    }
    #div4{
        width: 100%;
        height: 40px;
        background: rgba(0,0,0,0.8);
    }
</style>
